Fix: required validation for multi-select ComboBox (#9788)#9792
Merged
devongovett merged 5 commits intoadobe:mainfrom Mar 18, 2026
Merged
Fix: required validation for multi-select ComboBox (#9788)#9792devongovett merged 5 commits intoadobe:mainfrom
devongovett merged 5 commits intoadobe:mainfrom
Conversation
devongovett
reviewed
Mar 16, 2026
| let validation = useFormValidationState({ | ||
| ...props, | ||
| value: useMemo(() => Array.isArray(displayValue) && displayValue.length === 0 ? null : ({inputValue, value: displayValue as any, selectedKey}), [inputValue, selectedKey, displayValue]) | ||
| value: useMemo(() => ({inputValue, value: displayValue as any, selectedKey}), [inputValue, selectedKey, displayValue]) |
Member
There was a problem hiding this comment.
I don't think this is correct. If the value is empty, validate should not be called. This should be handled by isRequired.
devongovett
reviewed
Mar 16, 2026
| ); | ||
| let comboBoxProps = removeDataAttributes(props); | ||
| if (props.selectionMode === 'multiple') { | ||
| delete comboBoxProps.isRequired; |
Member
There was a problem hiding this comment.
Can we handle this inside the useComboBox hook?
devongovett
reviewed
Mar 16, 2026
| values = [null]; | ||
| // For multiple mode, add required to the hidden input when no values selected | ||
| let required = props.selectionMode === 'multiple' && props.isRequired; | ||
| inputs = [<input key="empty" type="hidden" name={name} form={props.form} value="" required={required} />]; |
Member
There was a problem hiding this comment.
Does this actually prevent form submission? I thought type="hidden" did not support required. We may need to use a type="text" with display: none here.
…required handling
Contributor
Author
|
I've addressed the review feedback. Please take another look.
…On Tue, Mar 17, 2026 at 12:28 AM Devon Govett ***@***.***> wrote:
***@***.**** commented on this pull request.
------------------------------
In packages/react-aria-components/src/ComboBox.tsx
<#9792 (comment)>
:
> @@ -210,12 +214,14 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
if (name && formValue === 'key') {
let values: (Key | null)[] = Array.isArray(state.value) ? state.value : [state.value];
if (values.length === 0) {
- values = [null];
+ // For multiple mode, add required to the hidden input when no values selected
+ let required = props.selectionMode === 'multiple' && props.isRequired;
+ inputs = [<input key="empty" type="hidden" name={name} form={props.form} value="" required={required} />];
Does this actually prevent form submission? I thought type="hidden" did
not support required. We may need to use a type="text" with display: none
here.
—
Reply to this email directly, view it on GitHub
<#9792 (review)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BBXSL3L7UMW6F4K53IMLX5D4RBFFPAVCNFSM6AAAAACWRZRUUCVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZTSNJVHE4DKOBXGY>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
…box-multiselect-required
…box-multiselect-required
Member
|
Added a commit to fix the tests and simplify the approach a little. I realized that we don't track the validation state for these hidden inputs, so we weren't displaying the validation errors properly. Instead of doing that, we can instead simply mark the visible text field as required but only if no items are selected. |
Member
|
@Nawaz-B-04 you'll need to sign the CLA |
5 tasks
snowystinger
approved these changes
Mar 18, 2026
devongovett
approved these changes
Mar 18, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #9788
✅ Pull Request Checklist:
📝 Test Instructions:
selectionMode="multiple"andisRequired.Expected result:
Form submission succeeds when items are selected.
Expected result:
Form validation prevents submission due to required constraint.
🧢 Your Project:
Personal open source contribution.